<template>
    <body>
        <div class="column-header">
            <!-- 头部导航 -->
            <div class="nav-box">
                <div class="nav">
                    <!-- 美术馆 -->
                    <div class="nav-option" v-if="galleryItems.length">
                        <div class="nav-option-top">
                            <div class="nav-option-row" v-for="(item, index) in galleryItems" :key="index">
                                <a @click.prevent="gotoColumn(item.columnId)" target="_blank"
                                    :class="{ 'selected': item.columnId === selectedColumnId }">
                                    <div :class="['nav-option-item', `nav_column${item.columnId}`]">{{ item.name }}</div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="nav-main">
                        <img src="../assets/image/JinanLogo.png" class="nav-logo" />
                        <a href="/" target="_blank" class="home-link">
                            <img src="../assets/image/home.png" class="home-logo" />
                            <div class="home-link-a">首页</div>
                        </a>
                    </div>
                    <!-- 画院 -->
                    <div class="nav-option" v-if="academyItems.length">
                        <div class="nav-option-top">
                            <div class="nav-option-row" v-for="(item, index) in academyItems" :key="index + 6">
                                <a @click.prevent="gotoColumn(item.columnId)" target="_blank"
                                    :class="{ 'selected': item.columnId === selectedColumnId }">
                                    <div :class="['nav-option-item', `nav_column${item.columnId}`]">{{ item.name }}</div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 中英转化 -->
                <div class="translate-box">
                    <!-- 修改为直接调用 translate.js 的方法 -->
                    <a @click="changeLanguage('english')">EN</a>
                    <a>/</a>
                    <a @click="changeLanguage('chinese_simplified')">中</a>
                </div>
            </div>
            <!-- 父栏目昵称 -->
            <div class="page-title-box">
                <div class="page-title">
                    <div class="title-box">
                        <div class="title">{{ columnDetail?.name }}</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</template>

<script>
import { defineComponent, onMounted, computed, watch, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useColumnsStore } from '@/store/column';
import { translate } from '../assets/js/public/translate.js';
import Footer from './footer.vue';
import { getColumnDetailService, getChildrencolumnsService } from '@/api/user.js';

export default defineComponent({
    name: 'ParentHeader',
    components: {
        Footer,
    },
    props: {
        selectedColumnId: {
            type: Number,
            default: null
        }
    },
    setup(props) {
        const columnsStore = useColumnsStore();
        const route = useRoute();
        const router = useRouter();
        const columnDetail = ref(null);
        const childrenColumns = ref([]);

        // 计算当前选中的栏目ID
        const currentSelectedId = computed(() => {
            // 如果传入了 selectedColumnId（来自文章详情页），则使用它
            if (props.selectedColumnId) {
                return props.selectedColumnId;
            }
            // 否则使用路由参数中的 id（来自栏目页）
            return route.params.id ? parseInt(route.params.id) : null;
        });

        // 定义一个方法来获取数据
        const fetchData = async (id) => {
            if (!id) return;
            try {
                // 获取栏目详情和子栏目详情
                const [columnDetailResponse, childrenColumnsResponse] = await Promise.all([
                    getColumnDetailService(id),
                    getChildrencolumnsService(id)
                ]);
                columnDetail.value = columnDetailResponse.data;
                childrenColumns.value = childrenColumnsResponse.data;
            } catch (error) {
                console.error("Failed to fetch data:", error);
            }
        };

        // 语言切换方法
        const changeLanguage = (langs) => {
            // 直接调用 translate.js 的切换语言方法
            translate.changeLanguage(langs);
        };

        // 监听计算属性的变化
        watch(currentSelectedId, async (newId) => {
            if (newId) {
                await fetchData(newId);
            }
        }, { immediate: true });

        // 在组件挂载时获取父级栏目数据
        onMounted(() => {
            if (columnsStore.parentColumns.length === 0) {
                columnsStore.fetchParentColumns();
            }
            // 设置支持的语言
            translate.selectLanguageTag.languages = 'english,chinese_simplified';

            // 设置默认翻译的语言
            translate.language.setLocal('chinese_simplified');

            // 初始化配置
            translate.init();

            // 设置自动识别浏览器语言
            translate.setAutoDiscriminateLocalLanguage();

            // 执行翻译
            translate.execute();
            // 可选：启动翻译监听，对于动态内容自动翻译
            translate.request.listener.start();
        });

        return {
            parentColumns: computed(() => columnsStore.parentColumns),
            galleryItems: computed(() => columnsStore.parentColumns.slice(0, 6)),
            academyItems: computed(() => columnsStore.parentColumns.slice(6, 12)),
            selectedColumnId: currentSelectedId,
            columnDetail,
            childrenColumns,
            gotoColumn: (columnId) => router.push({ name: 'ColumnVue', params: { id: columnId } }),
            changeLanguage
        };
    }
});
</script>
<style lang="scss">
@import '../assets/css/columns/iconfont.css';
@import '../assets/css/columns/column-content.css';
@import '../assets/css/columns/column-content01.css';
@import '../assets/css/columns/column-header.css';
@import '../assets/css/columns/reset.css';

.selected {
    background-color: #792323;
}
</style>